<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网上挂号</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./style/login/base.css">
    <link rel="stylesheet" href="./style/login/normalize.css">
    <link rel="stylesheet" href="./style/login/index.css">
    <script src="./plugins/vue/vue.js"></script>
    <script type="text/javascript" src="./plugins/axios/axios.js"></script>
    <script type="text/javascript" src="./js/request.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <meta charset="UTF-8">
    <title>病人病历</title>
</head>
<body>
<div id="app">
    <div class="xtx_topnav">

        <span class="span1">
                  退出登录
                </span>
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li>
                    <a href="./pages/login/register.html">免费注册</a>
                </li>
                <li>
                    <a href="pages/login/login.html">请先登录</a>
                </li>
                <li v-else>
                    <a href=""></a>
                </li>
                <li>
                    <a href="javascript:;">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;" @click="xianshiKefu">在线客服</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="medical-record-container">
        <h1>病人病历详情</h1>
        <!-- 基本信息卡片 -->
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>基本信息</span>
                </div>
            </template>
            <el-row :gutter="20">
                <el-col :span="8">
                    <p><strong>姓名：</strong>{{ medicalRecord.bingliXingming }}</p>
                </el-col>
                <el-col :span="8">
                    <p><strong>性别：</strong>{{ medicalRecord.bingliXingbie }}</p>
                </el-col>
                <el-col :span="8">
                    <p><strong>身份证号：</strong>{{ medicalRecord.bingliShenfenzheng }}</p>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <p><strong>年龄：</strong>{{ medicalRecord.bingliNianling }}</p>
                </el-col>
                <el-col :span="8">
                    <p><strong>手机号：</strong>{{ medicalRecord.bingliShoujihao }}</p>
                </el-col>
                <el-col :span="8">
                    <p><strong>症状：</strong>{{ medicalRecord.bingliZhengzhuang }}</p>
                </el-col>
                <el-col :span="8">
                    <p><strong>诊断结果：</strong>{{ medicalRecord.bingliZhengduanjieguo }}</p>
                </el-col>
                <el-col :span="8">
                    <p><strong>时间：</strong>{{ medicalRecord.bingliShijian}}</p>
                </el-col>
                <el-col :span="8">
                    <p><strong>医生Id：</strong>{{ medicalRecord.yisId}}</p>
                </el-col>
            </el-row>
        </el-card>
    </div>
    <div>
        <!--智能客服对话框-->
        <el-dialog title="ai服务" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="问题" label-width="200px">
                    <el-input v-model="form.ask" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="答案" label-width="200px">
                    <el-input v-model="form.que" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="deepseek">提 问</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<div class="xtx_footer">
    <div class="wrapper">
        <!-- 联系我们 -->
        <div class="contact clearfix">
            <dl>
                <dt>客户服务</dt>
                <dd class="chat">在线客服</dd>
                <dd class="feedback">问题反馈</dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd class="weixin">公众号</dd>
                <dd class="weibo">微博</dd>
            </dl>
            <dl>
                <dt>下载APP</dt>
                <dd class="qrcode">
                    <img src="./uploads/qrcode.jpg">
                </dd>
                <dd class="download">
                    <span>扫描二维码</span>
                    <span>立马下载APP</span>
                    <a href="javascript:;">下载页面</a>
                </dd>
            </dl>
            <dl>
                <dt>服务热线</dt>
                <dd class="hotline">
                    400-0000-000
                    <small>周一至周日 8:00-18:00</small>
                </dd>
            </dl>
        </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
        <div class="wrapper">
            <!-- 口号 -->
            <div class="slogan">
                <a href="javascript:;" class="price">网上方便</a>
                <a href="javascript:;" class="express">低价挂号</a>
                <a href="javascript:;" class="quality">挂号快捷</a>
            </div>
            <!-- 版权信息 -->
            <div class="copyright">
                <p>
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">帮助中心</a>
                    <a href="javascript:;">售后服务</a>
                    <a href="javascript:;">配送与验收</a>
                    <a href="javascript:;">商务合作</a>
                    <a href="javascript:;">搜索推荐</a>
                    <a href="javascript:;">友情链接</a>
                </p>
                <p>CopyRight &copy; 宝鸡文理学院</p>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            dialogFormVisible: false,
            medicalRecord: {
                bingliXingming: '',
                bingliXingbie: '',
                bingliShenfenzheng: '',
                bingliNianling: '',
                bingliShoujihao: '',
                bingliZhengzhuang: '',
                bingliZhengduanjieguo: '',
                bingliShijian: '',
                yisId: '',
            },
            form: {
                ask: '',
                que: ''
            },
            error: null
        },
        created() {
            // 模拟从后端获取病历数据
            this.registerIn();
        },
        methods: {
            registerIn() {
                axios({
                    url: 'http://localhost:8899/bingl/zuixin',// 替换为实际的后端接口地址
                    method: 'get',
                    params: {
                        bingliXingming: this.medicalRecord.bingliXingming,
                        bingliXingbie: this.medicalRecord.bingliXingbie,
                        bingliShenfenzheng: this.medicalRecord.bingliShenfenzheng,
                        bingliNianling: this.medicalRecord.bingliNianling,
                        bingliShoujihao: this.medicalRecord.bingliShoujihao,
                        bingliZhengzhuang: this.medicalRecord.bingliZhengzhuang,
                        bingliZhengduanjieguo: this.medicalRecord.bingliZhengduanjieguo,
                        bingliShijian: this.medicalRecord.bingliShijian,
                        yisId: this.medicalRecord.yisId
                    },
                }).then(resp => {
                    let result = resp.data;
                    console.log(result);
                    if (result.success) {
                        localStorage.setItem('id', result.id || '');
                        this.medicalRecord = result.data[0]
                        return;
                    }
                    this.error = result.error;
                })
            },
            xianshiKefu() {
                this.dialogFormVisible = true;
            },
            deepseek() {
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/deepseek/ask',
                    params: {
                        message: this.form.ask,
                    },
                }).then(resp => {
                    this.form.que = resp.data
                })
            }
        }
    })
</script>
<script src="plugins/element-ui/index.js"></script>
</html>